<template>
  <div class="m_header">
    <div class="m_back" @click="back">
      <a-button type="text" class="m_back_button">
        <span class="left_jump">&lt;&lt;&lt;&lt;</span>
      </a-button>
      <span class="text_b">返回管理平台</span>
    </div>
    <div class="text_a">
      <!-- <img class="logo" :src="baseURL + web_logo" /> -->
      <span class="text_c">{{ webs_name }}</span>
    </div>
    <div class="datetime">
      <div class="time">
        <div class="date">{{ datetimenow[2] }}</div>
        {{ datetimenow[0] }}
        <span v-show="datetimenow[1]">周</span>
        {{ datetimenow[1] }}
        <span>&gt;&gt;&gt;&gt;</span>
      </div>
    </div>
    <div class="picture"></div>
  </div>
</template>

<script lang="ts">
import moment from "moment";
import { defineComponent, ref, onUnmounted } from "vue";
import { router } from "/@/router";
import { com } from "/@/utils/rw/common";
export default defineComponent({
  name: "monitorHeader",
  setup() {
    const webs_name = window.config.control_name;
    const datetimenow = ref([]);
    let timer = ref<NodeJS.Timeout | undefined>();
    let toTimer = null;
    const web_logo = "";
    timer.value = setInterval(() => {
      let now = moment(new Date());
      datetimenow.value = [
        now.format("HH:mm:ss"),
        com.getWeek(now.format("d")),
        now.format("YYYY年MM月DD日"),
      ];
    }, 1000);

    const back = () => {
      router.replace("/welcome");
      toTimer = setTimeout(() => {
        location.reload();
      }, 5000);
    };

    onUnmounted(() => {
      clearTimeout(toTimer);
    });

    return {
      back,
      datetimenow,
      web_logo,
      webs_name,
    };
  },
});
</script>

<style lang="scss" scoped>
.m_header {
  position: relative;
  .m_back {
    position: absolute;
    top: 50%;
    left: 5%;
    transform: translateY(-60%);
    z-index: 99999;

    .m_back_button {
      border: none;
      background-color: transparent;
      outline: none;
      color: #fff;
      cursor: pointer;
      .el-icon-d-arrow-left {
        font-size: 15px;
      }
    }
    .left_jump {
      font-size: 18px;
      font-family: TRENDS;
      background: linear-gradient(to bottom, #3fffea 0%, #35eaed 50%, #0e9afa 100%);
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
    }
    .text_b {
      font-size: 18px;
      font-family: TRENDS;
      background: linear-gradient(to bottom, #3fffea 0%, #35eaed 50%, #0e9afa 100%);
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
      font-weight: 600;
    }
  }

  .text_a {
    text-align: center;
    font-family: TRENDS;
    background: linear-gradient(to bottom, #3fffea 0%, #35eaed 50%, #0e9afa 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    width: 370px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    .logo {
      width: 40px;
    }
    .text_c {
      font-size: 25px;
      font-weight: 600;
    }
  }
  .datetime {
    display: flex;
    position: absolute;
    top: 50%;
    right: 5%;
    transform: translateY(-60%);
    font-family: TRENDS;
    background: linear-gradient(to bottom, #3fffea 0%, #35eaed 50%, #0e9afa 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    font-size: 18px;
    font-weight: 600;
    text-align: center;

    .date {
      display: inline-block;
    }
  }
  .picture {
    width: 100%;
    height: 130%;
    background-image: url("../../assets/ruijin/images/Topoflargescreen.png");
    background-size: 100% 100%;
    position: absolute;
    top: 0%;
    left: 50%;
    transform: translateX(-50%);
  }
}
</style>
